<template>
  <div>
    <div class="header_top">
      <el-select
        v-model="obj.VIP_Level"
        style="width: 140px; font-size: 16px; height: 40px; text-align: center"
        name="VIP_Level"
        id=""
        placeholder="VIP等级"
      >
        <el-option style="font-size: 16px" value="黄铜">黄铜</el-option>
        <el-option style="font-size: 16px" value="青铜">青铜</el-option>
        <el-option style="font-size: 16px" value="白银">白银</el-option>
        <el-option style="font-size: 16px" value="黄金">黄金</el-option>
        <el-option style="font-size: 16px" value="钻石">钻石</el-option>
      </el-select>
      <el-select
        v-model="obj.gender"
        style="width: 140px; font-size: 16px; height: 40px; text-align: center"
        name="gender"
        id=""
        placeholder="性别"
      >
        <el-option style="font-size: 16px" value="男">男</el-option>
        <el-option style="font-size: 16px" value="女">女</el-option>
      </el-select>
      <el-input
        v-model="obj.name"
        style="width: 200px"
        placeholder="请输入姓名"
      />
      <el-input
        v-model="obj.tell"
        style="width: 200px"
        placeholder="请输入电话号码"
      />
      <el-input
        v-model="obj.document_number"
        style="width: 200px"
        placeholder="请输入证件号"
      />
      <el-button class="search_btn" @click="search">查询</el-button>
      <!-- <el-button class="btn_border" @click="">重置</el-button> -->
      <el-button class="add_btn" @click="add">新增</el-button>
    </div>

    <el-table
      :header-cell-style="{
        backgroundColor: '#dfdcea',
        color: 'black',
        fontSize: '14px',
        textAlign: 'center',
      }"
      :cell-style="{
        color: 'black',
        fontSize: '14px',
        textAlign: 'center',
        border: '1px solid #dfdcea',
      }"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="tell" label="手机号码" width="180" />
      <el-table-column prop="gender" label="性别" width="180" />
      <el-table-column prop="VIP" label="是否VIP" width="180" />
      <el-table-column prop="VIP_Level" label="VIP等级" width="180" />
      <el-table-column prop="document_type" label="证件类型" width="180" />
      <el-table-column prop="document_number" label="证件号码" width="180" />
      <el-table-column prop="address" label="地址" width="180" />
      <el-table-column fixed="right" label="操作" min-width="150">
        <template #default="scope">
          <el-button link size="small" @click="update(scope.row)">
            编辑
          </el-button>
          <el-button link size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="修改客人"
    width="1000"
    draggable="true"
    :before-close="handleClose"
  >
    <div class="edit_box">
      <div class="top">
        <ul class="uls">
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >客人姓名：</span
            >
            <el-input
              v-model="editForm.name"
              style="
                width: 200px;
                height: 40px;
                text-align: center;
                font-size: 16px;
              "
              type="text"
              placeholder="请输入姓名"
            />
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >手机号：</span
            ><el-input
              type="text"
              v-model="editForm.tell"
              placeholder="请输入手机号"
              style="
                width: 200px;
                font-size: 16px;
                height: 40px;
                text-align: center;
              "
            />
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >证件类型：</span
            ><el-select
              v-model="editForm.document_type"
              style="
                width: 200px;
                font-size: 16px;
                height: 40px;
                text-align: center;
              "
              name="document_type"
              id=""
            >
              <el-option value="" style="font-size: 16px">请选择证件</el-option>
              <el-option value="身份证" style="font-size: 16px"
                >身份证</el-option
              >
              <el-option value="护照" style="font-size: 16px">护照</el-option>
            </el-select>
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >是否VIP：</span
            >
            <el-radio value="是" name="VIP" v-model="editForm.VIP">是</el-radio>
            <el-radio value="否" name="VIP" v-model="editForm.VIP">否</el-radio>
            <!-- <input type="radio" v-model="addForm.VIP" name="VIP" value="是" />是
            <input v-model="addForm.VIP" type="radio" name="VIP" value="否" />否 -->
          </li>
        </ul>

        <ul class="uls">
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >性别：</span
            ><input
              type="radio"
              v-model="editForm.gender"
              name="gender"
              value="男"
            />男<input
              v-model="editForm.gender"
              type="radio"
              name="gender"
              value="女"
            />女
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >证件号：</span
            ><el-input
              type="text"
              v-model="editForm.document_number"
              placeholder="请输入证件号"
              style="
                width: 200px;
                font-size: 16px;
                height: 40px;
                text-align: center;
              "
            />
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >VIP等级：</span
            >

            <el-select
              v-model="editForm.VIP_Level"
              style="
                width: 200px;
                font-size: 16px;
                height: 50px;
                text-align: center;
              "
              name="VIP_Level"
              id=""
              placeholder="VIP等级"
            >
              <el-option style="font-size: 16px" value="黄铜">黄铜</el-option>
              <el-option style="font-size: 16px" value="青铜">青铜</el-option>
              <el-option style="font-size: 16px" value="白银">白银</el-option>
              <el-option style="font-size: 16px" value="黄金">黄金</el-option>
              <el-option style="font-size: 16px" value="钻石">钻石</el-option>
            </el-select>
          </li>
        </ul>
      </div>
      <div class="bottom">
        详细地址：<input
          v-model="editForm.address"
          style="width: 87%; height: 40px; font-size: 16px"
          type="text"
          placeholder="请输入详细地址"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button class="save" @click="save"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogVisible2"
    title="新增客人"
    width="1000"
    draggable="true"
    :before-close="handleClose"
  >
    <div class="edit_box">
      <div class="top">
        <ul class="uls">
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >客人姓名：</span
            >
            <el-input
              v-model="addForm.name"
              style="
                width: 200px;
                height: 40px;
                text-align: center;
                font-size: 16px;
              "
              type="text"
              placeholder="请输入姓名"
            />
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >手机号：</span
            ><el-input
              type="text"
              v-model="addForm.tell"
              placeholder="请输入手机号"
              style="
                width: 200px;
                font-size: 16px;
                height: 40px;
                text-align: center;
              "
            />
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >证件类型：</span
            ><el-select
              v-model="addForm.document_type"
              style="
                width: 200px;
                font-size: 16px;
                height: 40px;
                text-align: center;
              "
              name="document_type"
              id=""
            >
              <el-option value="" style="font-size: 16px">请选择证件</el-option>
              <el-option value="身份证" style="font-size: 16px"
                >身份证</el-option
              >
              <el-option value="护照" style="font-size: 16px">护照</el-option>
            </el-select>
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >是否VIP：</span
            >
            <el-radio value="是" name="VIP" v-model="addForm.VIP">是</el-radio>
            <el-radio value="否" name="VIP" v-model="addForm.VIP">否</el-radio>
            <!-- <input type="radio" v-model="addForm.VIP" name="VIP" value="是" />是
            <input v-model="addForm.VIP" type="radio" name="VIP" value="否" />否 -->
          </li>
        </ul>

        <ul class="uls">
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >性别：</span
            ><input
              type="radio"
              v-model="addForm.gender"
              name="gender"
              value="男"
            />男<input
              v-model="addForm.gender"
              type="radio"
              name="gender"
              value="女"
            />女
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >证件号：</span
            ><el-input
              type="text"
              v-model="addForm.document_number"
              placeholder="请输入证件号"
              style="
                width: 200px;
                font-size: 16px;
                height: 40px;
                text-align: center;
              "
            />
          </li>
          <li class="lis">
            <span
              style="display: inline-block; width: 90px; letter-spacing: 3px"
              >VIP等级：</span
            >

            <el-select
              v-model="addForm.VIP_Level"
              style="
                width: 200px;
                font-size: 16px;
                height: 50px;
                text-align: center;
              "
              name="VIP_Level"
              id=""
              placeholder="VIP等级"
            >
              <el-option style="font-size: 16px" value="黄铜">黄铜</el-option>
              <el-option style="font-size: 16px" value="青铜">青铜</el-option>
              <el-option style="font-size: 16px" value="白银">白银</el-option>
              <el-option style="font-size: 16px" value="黄金">黄金</el-option>
              <el-option style="font-size: 16px" value="钻石">钻石</el-option>
            </el-select>
          </li>
        </ul>
      </div>
      <div class="bottom">
        详细地址：<input
          v-model="addForm.address"
          style="width: 87%; height: 40px; font-size: 16px"
          type="text"
          placeholder="请输入详细地址"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button class="save" @click="add_save"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
    v-model="dialogVisible1"
    title="删除客人"
    width="1000"
    hight="400"
    draggable="true"
    :before-close="handleClose"
  >
    <p style="margin-left: 35px;">确认要删除该客人？</p>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button class="del" @click="del_custom"> 保存 </el-button>
      </div>
    </template>
  </el-dialog>

  <div style="margin: 30px 0">
    <el-pagination
      :page-sizes="[3, 5, 9, 15]"
      @next-click="nextClick"
      @prev-click="prevClick"
      :page-size="obj.pageSize"
      @current-change="currentChange"
      @size-change="sizeChange"
      :current-page="obj.currenPage"
      background
      layout="total,sizes,prev, pager, next,jumper"
      :total="totals"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import http from "../utils/request";

let customs = ref([]);
let tableData = customs;
let dialogVisible = ref(false);
let dialogVisible1 = ref(false);
let dialogVisible2 = ref(false);
let editForm = ref({});
let delForm = ref({});
let addForm = ref({});
let obj = ref({
  currentPage: 1,
  pageSize: 5,
  VIP_Level: "",
  gender: "",
  name: "",
  tell: "",
  document_number: "",
});

let search = () => {
  getCustoms();
};

let totals = ref(0);

let nextClick = (val) => {
  obj.value.currentPage = val;
  getCustoms();
};

let sizeChange = (val) => {
  obj.value.pageSize = val;
  getCustoms();
};

let currentChange = (val) => {
  obj.value.currentPage = val;
  getCustoms();
};

let prevClick = (val) => {
  obj.value.currentPage = val;
  getCustoms();
};

let getCustoms = async () => {
  let {
    data: { total, pagelist },
  } = await http.get("custom", { params: obj.value });
  customs.value = pagelist;
  totals.value = total;
};

//修改客户
let update = (row) => {
  dialogVisible.value = true;
  editForm.value = row;
};
let save = async () => {
  let {
    data: { code, msg },
  } = await http.put("custom_edit", editForm.value);
  if (code == 200) {
    getCustoms();
    dialogVisible.value = false;
    editForm.value = {};
  }
};

//添加客户

let add = () => {
  dialogVisible2.value = true;
};

let add_save = async () => {
  let {
    data: { code, msg },
  } = await http.post("custom_add", addForm.value);
  if (code == 200) {
    getCustoms();
    dialogVisible2.value = false;
    addForm.value = {};
  }
};

let del = (row) => {
  dialogVisible1.value = true;
  delForm.value = row;
};

let del_custom = async () => {
  let {
    data: { code, msg },
  } = await http.delete("custom_delete", {
    params: { _id: delForm.value._id },
  });
  if (code == 200) {
    getCustoms();
    dialogVisible1.value = false;
    delForm.value = {};
  }
};

onMounted(() => {
  getCustoms();
});
</script>
<style lang='scss' scoped>
* {
  list-style: none;
}

.el-button.is-link {
  color: #5d4f96;
}

.dialog-content {
  display: flex;
  justify-content: space-around;
}

.btn {
  background-color: #5d4f96;
  color: white;
}

.top {
  width: 100%;
  display: flex;
}

.save {
  background-color: #5d4f96;
  color: white;
}

.del {
  background-color: #5d4f96;
  color: white;
}
.header_top {
  margin: 20px 0;
  display: flex;
  justify-content: space-around;
}

.search_btn {
  border: 1px solid #5d4f96;
  background: #5d4f96;
  color: white;
}

.add_btn {
  border: 1px solid #5d4f96;
  color: #5d4f96;
}

.lis {
  padding: 10px 0px;
}

.uls {
  width: 50%;
}
.bottom {
  padding: 0px 35px;
}
</style>